﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>数据管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="MyraStudio" name="author" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="/assets/images/favicon.ico">



    <!-- App css -->
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/theme.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/bootstrap-table.css" rel="stylesheet" type="text/css" />
    <link href="/assets/layui/css/layui.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/step.css" rel="stylesheet" type="text/css" />
    <link href="/assets/layui/css/transfer.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/bootstrap-editable.css" rel="stylesheet" type="text/css" />
    <style>
        .login-user {
            display: flex;
            color: #000;
            line-height: 30px;
        }

        .login-user input {
            /* height: 30px; */
            border-radius: 4px;
            margin: 0px 4px;
        }

        .login-user select {
            /* height: 30px; */
            border-radius: 4px;
            margin: 0px 4px;
            width: 20px;
        }
    </style>

</head>

<body>

    <!-- Begin page -->
    <div id="layout-wrapper">

        <div class="container-fluid" style="margin-top: 10px;">

            <!-- start page title -->

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                            <h4 class="card-title">协议规则配置</h4>
                            <button type="button" class="btn btn-primary waves-effect waves-light"
                                onclick="createRuleModel()">新增</button>
                            <br></br>

                            <table id="table_page" class="table mb-0">

                            </table>

                        </div> <!-- end card body-->
                    </div> <!-- end card -->
                </div><!-- end col-->
            </div>
            <!-- end row-->



        </div> <!-- container-fluid -->

    </div>
    <!-- END layout-wrapper -->

    <!-- Add model -->
    <div id="ruleModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="ruleModalLabel" style="display: none;">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <!--模态框的头部内容-->
                <div class="modal-header">

                    <h4 class="modal-title" id="ruleModalLabel">新增规则</h4>
                </div>
                <!--模态框的主体内容-->

                <div class="layui-fluid">
                    <div class="layui-card">
                        <div class="layui-card-body" style="padding-top: 40px;">
                            <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                                <div carousel-item class="layui-form" lay-filter="rule">
                                    <div>
                                        <form class="layui-form"
                                            style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                            <div class="layui-form-item">
                                                <label class="layui-form-label"
                                                    style="white-space: nowrap;">规则名称:</label>
                                                <div class="layui-input-block">
                                                    <input type="text" name="rule_name" placeholder="输入规则名称"
                                                        lay-verify="required" class="layui-input" required />
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label"
                                                    style="white-space: nowrap;">协议名称:</label>
                                                <div class="layui-input-block">
                                                    <select name="dp" id="dp" lay-verify="required"
                                                        lay-filter="xmFilter">
                                                        <option value=""></option>
                                                    </select>
                                                </div>
                                            </div>
                                            <fieldset class="layui-elem-field">
                                                <legend>内容总览</legend>
                                                <div class="layui-field-box">
                                                    <!-- <div class="layui-form-item" id="textA"></div> -->
                                                    <!-- <table class="layui-hide" id="test"></table> -->
                                                    <div class="layui-form-item">
                                                        <table id="showTable"></table>
                                                    </div>
                                                </div>
                                            </fieldset>


                                            <div class="layui-form-item" style="text-align: right">
                                                <div class="layui-input-block">
                                                    <button class="layui-btn" lay-submit lay-filter="formStep">
                                                        &emsp;下一步&emsp;
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div>
                                        <form class="layui-form"
                                            style="margin: 0 auto;max-width: 460px;padding-top: 40px;">

                                            <div class="layui-form-item">
                                                <label class="layui-form-label" style="white-space: nowrap;">目的ip:
                                                </label>
                                                <div class="layui-input-block login-user ">
                                                    <input type="text" name="ip1" id="ip1" class="layui-input numInput"
                                                        required />.
                                                    <input type="text" name="ip2" id="ip2" class="layui-input numInput"
                                                        required />.
                                                    <input type="text" name="ip3" id="ip3" class="layui-input numInput"
                                                        required />.
                                                    <input type="text" name="ip4" id="ip4" class="layui-input numInput"
                                                        required />
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label"
                                                    style="white-space: nowrap;">目的端口:</label>
                                                <div class="layui-input-block">
                                                    <input type="text" name="port" placeholder="输入目的端口"
                                                        lay-verify="required|number" class="layui-input port"
                                                        required />
                                                </div>
                                            </div>
                                            <div class="layui-form-item" id="storage_rule_div">
                                                <label class="layui-form-label"
                                                    style="white-space: nowrap;">存储规则:</label>
                                                <div class="layui-input-block">
                                                    <select id="storage_rule" name="storage_rule">
                                                        <option value=""></option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label"
                                                    style="white-space: nowrap;">处理方式:</label>
                                                <div class="layui-input-block">
                                                    <select name="method" lay-verify="required" lay-filter="method">
                                                        <option value=""></option>
                                                        <option value="database">存数据库</option>
                                                        <option value="rawdata">数据落盘</option>
                                                        <option value="database_rawdata">存数据库和数据落盘</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <div class="layui-inline">
                                                    <label class="layui-form-label"
                                                        style="white-space: nowrap;">标识配置:</label>
                                                    <div class="layui-input-block">
                                                        <button type="button" class="layui-btn" onclick="tag_config()">配置</button>
                                                    </div>
                                                </div>
                                                <div class="layui-inline" id="database_table" style="display: none;">
                                                    <label class="layui-form-label"
                                                        style="white-space: nowrap;">数据库表:</label>
                                                    <div class="layui-input-block">
                                                        <button type="button" class="layui-btn"
                                                            onclick="arr_Dbtbls_config()">配置</button>
                                                    </div>
                                                </div>

                                            </div>



                                            <!-- <div class="layui-form-item">
                                                <label class="layui-form-label"
                                                    style="white-space: nowrap;">存储时长:</label>
                                                <div class="layui-input-block login-user">
                                                    <input type="text" id="expired_value" name="expired_value"
                                                        placeholder="请输入" lay-filter="expired_value"
                                                        lay-verify="required" class="layui-input" required />
                                                    <select id="expired_select" name="expired_select"
                                                        lay-verify="required" lay-filter="expired_select">
                                                        <option value="year">年</option>
                                                        <option value="month">月</option>
                                                        <option value="day">天</option>
                                                        <option value="hour">小时</option>
                                                        <option value="min">分钟</option>
                                                    </select>
                                                </div>
                                            </div> -->

                                            <!-- <div class="layui-form-item">
                                                <label class="layui-form-label"
                                                    style="white-space: nowrap;">数据等级:</label>
                                                <div class="layui-input-block">
                                                    <select id="level" name="level" lay-verify="required">
                                                        <option value=""></option>
                                                        <option value="1">1</option>
                                                        <option value="2">2</option>
                                                        <option value="3">3</option>
                                                        <option value="4">4</option>
                                                        <option value="5" selected>5</option>
                                                    </select>
                                                </div>
                                            </div> -->



                                            <div class="layui-form-item" style="text-align: right">
                                                <div class="layui-input-block">
                                                    <button type="button"
                                                        class="layui-btn layui-btn-primary pre">上一步</button>
                                                    <button class="layui-btn" lay-submit lay-filter="formStep2">
                                                        &emsp;确认&emsp;
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- <div>
                                        <form class="layui-form" style="margin: 0 auto;max-width: 460px;">

                                            <div class="layui-form-item">
                                                <div id="test1" class="demo-transfer" style=" text-align: center"></div>
                                            </div>
                                        

                                            <div class="layui-form-item" style="text-align: right">
                                                <div class="layui-input-block">
                                                    <button type="button"
                                                        class="layui-btn layui-btn-primary pre">上一步</button>
                                                    <button class="layui-btn" lay-submit lay-filter="formStep3"
                                                        lay-demoTransferActive="getData">
                                                        &emsp;确认&emsp;
                                                    </button>
                                                    <button class="layui-btn" lay-submit lay-filter="formStep3">
                                                        &emsp;确认&emsp;
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div> -->
                                    <div>
                                        <div style="text-align: center;margin-top: 90px;">
                                            <i class="layui-icon layui-circle"
                                                style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                            <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                                填写完成
                                            </div>

                                            <div style="text-align: center;margin-top: 50px;">
                                                <button class="layui-btn next">返回</button>
                                                <button class="layui-btn layui-btn-primary"
                                                    id="testSubmitBtn">录入</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--模态框的尾部内容-->
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- END model -->

    <!-- databasetblsConfig model -->
    <div id="databasetblsConfigModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="databasetblsConfigModalLabel" style="display: none;">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <!--模态框的头部内容-->
                <div class="modal-header">
                    <h4 class="modal-title" id="databasetblsConfigModalLabel">数据库表配置</h4>
                </div>
                <!--模态框的主体内容-->
                <div class="layui-fluid">
                    <div class="layui-card">
                        <div class="layui-card-body" style="padding-top: 40px;">
                            <div carousel-item class="layui-form" lay-filter="rule">
                                <div>
                                    <form class="layui-form" style="margin: 0 auto">
                                        <div class="layui-form-item">
                                            <div id="test1" class="demo-transfer" style=" text-align: center"></div>
                                        </div>
                                        <div class="layui-form-item" style="text-align: right">
                                            <div class="layui-input-block">
                                                <input type="button" value="确认" class="layui-btn"
                                                    onclick="arr_Dbtbls_config_hide()" lay-demoTransferActive="getData">
                                                <!-- <button class="layui-btn" >
                                                    &emsp;确认&emsp;
                                                </button> -->
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- END model -->

    <!-- databasetbls model -->
    <div id="databasetblsModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="databasetblsModalLabel" style="display: none;">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <!--模态框的头部内容-->
                <div class="modal-header">
                    <h4 class="modal-title" id="databasetblsModalLabel">数据库表修改</h4>
                </div>
                <!--模态框的主体内容-->
                <div class="layui-fluid">
                    <div class="layui-card">
                        <div class="layui-card-body" style="padding-top: 40px;">
                            <div carousel-item class="layui-form" lay-filter="DBtable_modify">
                                <div>
                                    <form class="layui-form" style="margin: 0 auto">
                                        <div class="layui-form-item">
                                            <div id="test2" class="demo-transfer" style=" text-align: center"></div>
                                        </div>
                                        <div class="layui-form-item" style="text-align: right">
                                            <div class="layui-input-block">
                                                <button class="layui-btn" id="modify_button" name="modify_button"
                                                    lay-filter="modify_button" lay-demoTransferActive="getData_modify">
                                                    &emsp;确认&emsp;
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- END model -->

    <!-- tagConfig model -->
    <div id="tagConfig" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="tagConfigModalLabel"
        style="display: none;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <!--模态框的头部内容-->
                <div class="modal-header">

                    <h4 class="modal-title" id="tagConfigModalLabel">标签配置</h4>
                </div>
                <!--模态框的主体内容-->
                <div class="modal-body">
                    <input type='button' class="btn btn-primary waves-effect waves-light" value='新增'
                        onclick="addtagConfigTable()" />
                    <form method='post' id="tagConfigForm">
                        <table class="table table-striped table-bordered table-hover" id="tag_config">
                            <tr>
                                <td>ID</td>&nbsp;&nbsp;
                                <td>标签</td>&nbsp;&nbsp;
                                <td>操作</td>&nbsp;&nbsp;
                            </tr>
                        </table>
                    </form>
                </div>
                <!--模态框的尾部内容1-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal"  onclick="lookTag()">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- END model -->

    <!-- Edit model -->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        style="display: none;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <!--模态框的头部内容-->
                <div class="modal-header">

                    <h4 class="modal-title" id="myModalLabel">标签内容</h4>
                </div>
                <!--模态框的主体内容-->
                <div class="modal-body">
                    <input type='button' class="btn btn-primary waves-effect waves-light" value='新增'
                        onclick="addprotoEditTable()" />
                    <form method='post' id="protoForm1">
                        <table class="table table-striped table-bordered table-hover" id="protoView">
                            <tr>
                                <td>ID</td>&nbsp;&nbsp;
                                <td>标签</td>&nbsp;&nbsp;
                                <td>操作</td>&nbsp;&nbsp;
                            </tr>
                        </table>
                    </form>
                </div>
                <!--模态框的尾部内容-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal"
                        onclick="buildEditProtoJson()">保存/提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- END model -->

    <!-- Overlay-->
    <div class="menu-overlay"></div>

    <script>
        var ipm = '[[${manageIp}]]';
    </script>
    <!-- jQuery  -->
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/js/metismenu.min.js"></script>
    <script src="/assets/js/waves.js"></script>
    <script src="/assets/js/bootstrap-table.js"></script>
    <script src="/assets/js/bootstrap-table-zh-CN.js"></script>
    <script src="/assets/js/bootstrap-editable.js"></script>
    <script src="/assets/js/bootstrap-table-editable.js"></script>
    <script src="/assets/layui/layui.js"></script>
    <script src="/assets/js/step.js"></script>
    <script src="/assets/js/bootstrap-switch.min.js"></script>
    <!-- third party js -->

    <!-- third party js ends -->

    <!-- Datatables init -->
    <script src="/assets/pages/rule-demo.js"></script>
    <script src="/assets/pages/arrowall.js"></script>

    <!-- App js -->
    <script src="/assets/js/theme.js"></script>



</body>

</html>